<template>
  <div class="register box">
    <div class="container row header mb-4">
      <h2>欢迎注册</h2>
    </div>
    <form action="" class="container" autocomplete="off">
      <!-- 账号 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-yonghu"></span>
        <input
          type="text"
          class="form-control"
          name="username"
          v-model="username"
        />
      </div>
      <!-- 密码 -->
      <div class="row mb-4 form-group">
        <span class="iconfont icon-mima"></span>
        <input
          type="password"
          class="form-control"
          name="password"
          v-model="password"
        />
      </div>
      <div class="row mb-4">
        <button
          type="submit"
          class="btn btn-primary"
          @click.prevent="goRegister"
        >
          注册
        </button>
      </div>
      <div class="row mb-3">
        <router-link class="link" to="/login">已有账号，去登录</router-link>
      </div>
    </form>
  </div>
</template>

<script>
import { registerAPI } from "../api/user";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async goRegister() {
      const userKey = { username: this.username, password: this.password };
      console.log(userKey);
      const res = await registerAPI(userKey);
      console.log(res);
      if (res.data.code === 0) {
        this.$message({
          message: res.data.message,
          type: "success",
        });
        setTimeout(() => {
          this.$router.push("/login");
        }, 3000);
      } else {
        this.$message({
          message: res.data.message,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 360px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  .header {
    display: flex;
    align-items: center;
    h2 {
      font-size: 22px;
    }
  }
  .form-group {
    position: relative;
    .iconfont {
      position: absolute;
      left: 4px;
      top: 6px;
      font-weight: bold;
      color: #a9a9aa;
      width: 36px;
    }
    input.form-control {
      padding-left: 40px;
    }
  }
}
</style>
